<template>
  <div class="eco-effect-overview">
    <!-- 指标卡片区 -->
    <el-row :gutter="24" class="card-row">
      <el-col :span="6" v-for="item in effectCards" :key="item.title">
        <el-card class="effect-card" shadow="hover">
          <div class="effect-title">{{ item.title }}</div>
          <div class="effect-value" :style="{color: item.color}">
            {{ item.value }}
            <span class="effect-unit">{{ item.unit }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="32" style="margin-top:32px;">
      <el-col :span="12">
        <el-card>
          <div class="chart-title">修复前后核心指标对比</div>
          <div ref="barRef" style="width:100%;height:320px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-title">修复成效分布</div>
          <div ref="pieRef" style="width:100%;height:320px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="margin-top:32px;">
      <el-col :span="24">
        <el-card>
          <div class="effect-summary-title">修复成效总结</div>
          <div class="effect-summary-content">
            本项目修复区域共计 <b>132,400㎡</b>，植被恢复率达到 <b>91.8%</b>，土壤有机质含量提升 <b>38.2%</b>，污染物去除率 <b>85.6%</b>，生态多样性指数显著提升。
            <br>
            <ul>
              <li>修复前后环境质量明显提升，生态服务功能恢复良好。</li>
              <li>土壤、植被与水体指标均优于区域基线。</li>
              <li>分区域成效均达到预期，部分创新技术应用取得突破。</li>
              <li>建议持续跟踪成效并优化后期管理措施。</li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 指标卡片
const effectCards = [
  { title: '修复面积', value: '132,400', unit: '㎡', color: '#409EFF' },
  { title: '植被恢复率', value: '91.8', unit: '%', color: '#67C23A' },
  { title: '污染物去除率', value: '85.6', unit: '%', color: '#E6A23C' },
  { title: '土壤有机质提升', value: '38.2', unit: '%', color: '#13C2C2' }
]

// 柱状对比图（修复前后核心指标）
const barRef = ref<HTMLDivElement>()
const barX = ['植被覆盖', '土壤有机质', '水体溶氧', '生物多样性', '污染物含量']
const barBefore = [52, 1.3, 4.8, 38, 100]
const barAfter = [91.8, 1.8, 6.1, 64, 14.4]

onMounted(() => {
  if (barRef.value) {
    const barChart = echarts.init(barRef.value)
    barChart.setOption({
      tooltip: { trigger: 'axis' },
      legend: { data: ['修复前', '修复后'] },
      xAxis: { type: 'category', data: barX },
      yAxis: { type: 'value' },
      series: [
        { name: '修复前', type: 'bar', data: barBefore, barWidth: 28 },
        { name: '修复后', type: 'bar', data: barAfter, barWidth: 28 }
      ],
      color: ['#E6A23C', '#67C23A']
    })
  }

  // 饼图分布
  if (pieRef.value) {
    const pieChart = echarts.init(pieRef.value)
    pieChart.setOption({
      tooltip: { trigger: 'item' },
      legend: { bottom: 0 },
      series: [
        {
          name: '成效分布',
          type: 'pie',
          radius: ['45%', '72%'],
          avoidLabelOverlap: false,
          itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 },
          label: { show: true, formatter: '{b}: {d}%' },
          data: [
            { value: 52, name: '植被提升' },
            { value: 23, name: '土壤改良' },
            { value: 15, name: '水体修复' },
            { value: 10, name: '其他成效' }
          ]
        }
      ],
      color: ['#67C23A', '#409EFF', '#13C2C2', '#E6A23C']
    })
  }
})

// 饼图引用
const pieRef = ref<HTMLDivElement>()
</script>

<style scoped>
.eco-effect-overview {
  width: 100%;
  margin: 0;
  padding: 32px 0;
}
.card-row {
  margin-bottom: 8px;
}
.effect-card {
  text-align: center;
  border-radius: 16px;
  background: linear-gradient(120deg,#fff 75%,#e7fbee 100%);
  box-shadow: 0 2px 12px #0001;
  min-height: 104px;
  margin-bottom: 16px;
}
.effect-title {
  font-size: 15px;
  color: #888;
  margin-top: 10px;
}
.effect-value {
  font-size: 28px;
  font-weight: bold;
  margin-top: 8px;
}
.effect-unit {
  font-size: 16px;
  margin-left: 4px;
  color: #888;
}
.chart-title {
  font-size: 17px;
  color: #222;
  font-weight: bold;
  margin-bottom: 18px;
}
.effect-summary-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #222;
}
.effect-summary-content {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin-left: 6px;
}
.effect-summary-content ul {
  margin: 4px 0 0 22px;
  padding: 0;
  color: #308d2d;
}
</style>
